<script>
import store from "../../../../store"
import { userActionType } from "../../../../store/modules/user"
import { getShowImage, showModal, showToast } from "../../../../utils"
import recommender from "../../../../utils/recommender"

export default {
	name: "index",
	methods: {
		getShowImage,
		async receive() {
			//执行下一个事件队列
			await recommender.dispatchRecommenderBehavior()
		},
	},
	data() {
		return {
			posterImage: "",
		}
	},
	async onLoad() {
		const behavior = store.getters[userActionType.getters.recommender.behavior]
		this.posterImage = behavior.data.boxDetailsPicture
	},
}
</script>

<template>
	<view class="page">
		<image :src="getShowImage(posterImage)" class="poster" mode="widthFix"></image>
		<view class="conform-btn" @click="receive">立即领取</view>
	</view>
</template>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	padding-bottom: calc(160rpx + env(safe-area-inset-top));
	
	.poster {
		width: 100%;
	}
	
	.conform-btn {
		position: fixed;
		bottom: calc(60rpx + env(safe-area-inset-bottom));
		left: 50%;
		transform: translateX(-50%);
		padding: 0 60rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: var(--theme-color);
		color: var(--text-color);
		border-radius: 50rpx;
		font-size: 32rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}
}
</style>
